<template>
<div class="page-wrapper">
  <Breadcrumb v-bind="breads" />
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <button type="button" class="btn btn-link" style="float:left;" v-on:click="toggleMenu">
          <span class="mdi mdi-menu"></span>{{menuBtnText()}}
        </button>
        <button type="button" class="btn btn-link" style="float:left;" v-on:click="add">
          <span class="far fa-plus-square"></span>添加根节点
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <ul class="list-group" style="background-color:#fff;padding:15px;line-height: 35px;">
          <ListItem v-for="(permit, index) in permits" :permits="permits" :index="index" :permit="permit" :key="permit.permitId"
            :isShowMenu="isShowMenu" :platType="platType" />
        </ul>
      </div>
    </div>
  </div>
  <Footer />
</div>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'
  import Footer from './ComFooter'
  import Breadcrumb from './ComBreadcrumb'

  import ListItem from './PermitListItem'
  import { platforms } from '../dist/js/enum'


  function toggleMenu() {
    this.isShowMenu = !this.isShowMenu
  }
  function menuBtnText() {
    return this.isShowMenu ? '显示所有节点' : '显示菜单节点'
  }
  function add() {
    const item = {
      level: 0,
      sort: this.permits.length > 0 ? this.permits[this.permits.length - 1].sort + 1 : 0,
      platform: parseInt(this.platform),
      name: '新的权限名称',
      permit: '',
      auth: '',
      tag: '',
      path: '',
      isMenu: true, // 是否为菜单
      icon: 'mdi mdi-chart-bubble',
      permits: [],
      isLoaded: false,
      isFolderOpen: false,
      isEditing: true // 是否为编辑状态
    }
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/permit/add/' + this.platform + '/!/' + this.platType + '-add-permit',
      type: 'put',
      data: JSON.stringify(item),
      success: result => {
        if (result.status != 0) {
          $(document).failMsg(result.messge)
          return
        }
        item.permitId = result.data
        this.permits.push(item)
      }
    })
  }
  function loadPermits(permits, parent) {
    $.get(cfg.serverPath + '/permit/list/' + this.platform + '/!/' + this.platType + '-list-permit',
      {
        level: parent.level + 1,
        parentId: parent.permitId,
        'sorts[0].field': 'sort',
        'sorts[0].isDesc': false
      },
      result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        if (!result.data) {
          return
        }
        for (let permit of result.data) {
          permit.isEditing = false
          permit.isLoaded = false
          permit.isFolderOpen = false
          permit.permits = []
          permits.push(permit)
        //this.loadPermits(permit.permits, permit) 
        }
      })
  }
  function reset() {
    this.permits.splice(0, this.permits.length)
    for (let i in this.platforms) {
      if (this.platforms[i].name.toLowerCase().indexOf(this.platType) != -1) {
        this.platform = i
        break
      }
    }
    this.loadPermits(this.permits, {
      level: -1
    })
  }
  function breads() {
    return {
      title: this.platforms[this.platform].text + '-权限定义',
      items: [
        {
          href: '#/',
          name: '主页'
        },
        {
          href: '',
          name: this.platforms[this.platform].text
        },
        {
          href: '',
          name: '权限定义'
        }
      ]
    }
  }
  export default {
    props: {
      platType: String
    },
    components: {
      Breadcrumb,
      Footer,
      ListItem
    },
    data() {
      return {
        platforms,
        platform: -1,
        isShowMenu: false,
        menuBtnText,
        permits: []
      }
    },
    methods: {
      reset,
      loadPermits,
      toggleMenu,
      add
    },
    created() {
      this.reset()
    },
    computed: {
      breads
    },
    watch: {
      platType() {
        this.reset()
      }
    }
  }
</script>